<template>
  <div class="max-w-5xl mx-auto px-4 pb-20">
    <div class="flex items-center justify-center mb-6">
      <div class="w-16 h-px bg-ink/20"></div>
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-kai mx-4 text-ink">观众评论</h2>
      <div class="w-16 h-px bg-ink/20"></div>
    </div>

    <!-- 评论输入框 -->
    <div class="bg-white/70 rounded-sm shadow-md p-6 mb-6">
      <div class="w-full">
        <textarea
          v-model="newComment"
          placeholder="写下您对这幅作品的感想..."
          class="w-full p-3 border border-gray-300 rounded-sm resize-none font-kai text-[clamp(0.9rem,2vw,1rem)] focus:outline-none focus:border-[#D4AF37] transition-colors duration-300"
          rows="3"
        ></textarea>
        <div class="flex justify-between items-center mt-3">
          <span class="text-gray-500 text-sm font-kai">{{ newComment.length }}/200</span>
          <button
            @click="submitComment"
            :disabled="!newComment.trim() || newComment.length > 200"
            class="bg-[#D4AF37] text-white px-4 py-2 rounded-sm font-kai transform transition-all duration-300 hover:bg-[#B8941F] hover:scale-105 disabled:bg-gray-400 disabled:cursor-not-allowed disabled:hover:scale-100"
          >
            发表评论
          </button>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="space-y-4">
      <div
        v-for="comment in comments"
        :key="comment.id"
        class="bg-white/50 p-4 rounded-sm mb-3 transform transition-all duration-300 hover:shadow-lg"
      >
        <div class="flex items-start gap-3">
          <img
            :src="comment.avatar"
            :alt="comment.username"
            class="w-10 h-10 rounded-full object-cover"
          />
          <div class="flex-1">
            <div class="flex items-center gap-2 mb-2">
              <span class="font-kai font-bold text-gray-800">{{ comment.username }}</span>
              <span class="text-gray-500 text-sm">{{ comment.time }}</span>
            </div>
            <p class="text-gray-700 leading-relaxed font-kai text-[clamp(0.9rem,2vw,1rem)]">
              {{ comment.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  initialComments: {
    type: Array,
    default: () => [
      {
        id: 1,
        username: "书法爱好者",
        avatar: "https://picsum.photos/40/40?random=1",
        time: "2小时前",
        content: "这幅作品真的很棒！笔法流畅，意境深远，体现了作者深厚的书法功底。",
      },
      {
        id: 2,
        username: "墨香雅韵",
        avatar: "https://picsum.photos/40/40?random=2",
        time: "5小时前",
        content: "字体结构严谨，章法布局合理，是一幅难得的佳作。期待看到更多这样的作品。",
      },
      {
        id: 3,
        username: "文化传承者",
        avatar: "https://picsum.photos/40/40?random=3",
        time: "1天前",
        content: "传统与现代的完美结合，既保持了古典韵味，又融入了时代特色，值得细细品味。",
      },
    ]
  }
});

const emit = defineEmits(['commentSubmitted']);

const newComment = ref("");
const comments = ref([...props.initialComments]);

// 提交评论
const submitComment = () => {
  if (!newComment.value.trim() || newComment.value.length > 200) {
    return;
  }
  
  const comment = {
    id: comments.value.length + 1,
    username: "我",
    avatar: `https://picsum.photos/40/40?random=${comments.value.length + 4}`,
    time: "刚刚",
    content: newComment.value.trim(),
  };
  
  comments.value.unshift(comment);
  emit('commentSubmitted', comment);
  newComment.value = "";
};
</script>

<style scoped>
.text-ink {
  color: #2c2c2c;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transform {
  animation: fadeIn 0.3s ease-out;
}
</style>